🎯 Prophetic Intelligence Platform - Frontend

Professional Dashboard for Biblical Prophecy Monitoring

This is the frontend dashboard that displays RSS feeds, real-time articles, and prophecy analytics from the backend data engine.

πŸš€ Quick Setup

1. Deploy to Cloudflare Pages

# Clone the repository
git clone https://github.com/YellowKidokc/Prophetic-Intelligence-Platform-Frontend.git
cd Prophetic-Intelligence-Platform-Frontend
 
# Configure backend URL in index.html
# Edit line ~200: const BACKEND_URL = "https://your-backend-worker.workers.dev";
 
# Deploy to Cloudflare Pages
# Method 1: Drag and drop the folder to Cloudflare Pages dashboard
# Method 2: Connect GitHub repository to Cloudflare Pages

2. Configure Backend Connection

Update index.html line ~200:

// Replace with your actual backend URL
const BACKEND_URL = "https://your-backend-worker.your-subdomain.workers.dev";

✨ Features

πŸ“Š Professional Dashboard

  • Six-tier feed organization: Breaking News β†’ Core Prophecies
  • Real-time statistics: Feed counts, articles processed, system health
  • Clean interface: Professional dark theme with green accents
  • Responsive design: Works on desktop, tablet, and mobile

πŸ“‘ Live Intelligence Stream

  • Real-time article feed: Latest high-scoring articles (5.0+)
  • Auto-refresh: Every 15 seconds (toggleable)
  • Color-coded scoring: Red (8.0+), Orange (6.0+), Green (<6.0)
  • Click to read: Opens articles in new tab

⚑ Backend Integration

  • Direct backend access: Button to open backend dashboard
  • Manual triggers: Force RSS ingestion from frontend
  • Data export: Download feed configurations as JSON
  • Error handling: Graceful fallbacks for connection issues

🎯 Feed Categories

  • TIER 1: Breaking News (🚨 Every 5 minutes)
  • TIER 2: Prophetic Teaching (πŸ“– Every 30 minutes)
  • TIER 3: Research Sources (πŸ”¬ Hourly)
  • TIER 4: Geopolitical (🌍 Daily)
  • TIER 5: Antichrist Watch (😈 Real-time)
  • TIER 6: Core Prophecies (πŸ“œ Key indicators)

πŸ–₯️ Dashboard Layout

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚            Ξ©Ξ₯ΞœΞ•ΞΞ‘ INTELLIGENCE PLATFORM                    β”‚
β”‚        Automated Biblical Prophecy Monitoring              β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚  [πŸ”„ Refresh] [πŸ“€ Export] [βš™οΈ Backend] [πŸš€ Trigger]        β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ 🚨 TIER 1: Breaking News    πŸ“– TIER 2: Prophetic Teaching β”‚
β”‚ β€’ Breaking Israel News      β€’ Jack Hibbs                   β”‚
β”‚ β€’ Israel National News      β€’ Amir Tsarfati               β”‚
β”‚ β€’ Jerusalem Post            β€’ JD Farag                     β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ πŸ”¬ TIER 3: Research         🌍 TIER 4: Geopolitical       β”‚
β”‚ β€’ Prophecy News Watch       β€’ World Net Daily              β”‚
β”‚ β€’ Rapture Ready             β€’ DEBKAfile                    β”‚
β”‚ β€’ Biblical Archaeology      β€’ UN News                      β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ 😈 TIER 5: Antichrist       πŸ“œ TIER 6: Core Prophecies    β”‚
β”‚ β€’ Specialized feeds         β€’ Key indicators               β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ [32] Active β”‚ [2,847] β”‚ [14,582] β”‚ [12s]                  β”‚
β”‚ Feeds       β”‚ Today   β”‚ Total    β”‚ Response               β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ πŸ“‘ LIVE INTELLIGENCE STREAM     [Refresh] [Auto: ON]      β”‚
β”‚                                                             β”‚
β”‚ β€’ Macron announces peace framework... Score: 8.7/10       β”‚
β”‚ β€’ Temple preparations advance... Score: 9.1/10            β”‚
β”‚ β€’ Digital ID system proposed... Score: 6.4/10             β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

πŸ”§ Configuration

Backend URL Setup

  1. Deploy your backend first using the Backend Repository
  2. Get your backend URL from the Cloudflare Workers deployment
  3. Update the frontend by editing index.html:
// Line ~200 in index.html
const BACKEND_URL = "https://your-actual-backend-url.workers.dev";

Custom Domain (Optional)

  1. Go to Cloudflare Pages β†’ Your Site β†’ Custom Domains
  2. Add domain: dashboard.yoursite.com
  3. Update DNS records as instructed

🎨 Customization

Theme Colors

Edit CSS variables in index.html:

:root {
    --primary-color: #00ff88;     /* Main green */
    --background: #0a0a0a;        /* Dark background */
    --accent: #1a1a2e;           /* Card backgrounds */
    --text: #ffffff;             /* Main text */
    --muted: #888888;            /* Secondary text */
}

Categories

Add or modify feed categories:

// In loadDashboardData() function
const categorizedFeeds = {
    'breaking-news': [],
    'prophetic-teaching': [],
    'research-sources': [],
    'geopolitical': [],
    'antichrist-watch': [],
    'core-prophecies': [],
    'your-custom-category': []  // Add custom categories
};

Refresh Intervals

// Auto-refresh interval (currently 15 seconds)
setInterval(() => {
    if (isLiveAutoRefreshEnabled) {
        fetchLiveFeed();
    }
}, 15000); // Change to your preferred interval

πŸ“± Mobile Responsive

The dashboard automatically adapts to different screen sizes:

  • Desktop: 6-column grid layout
  • Tablet: 3-column grid layout
  • Mobile: Single column layout
  • Touch-friendly: Large buttons and touch targets

πŸ” API Integration

The frontend calls these backend endpoints:

Feed Management

// Get all feeds
GET /api/feeds
 
// Get recent high-scoring articles
GET /api/articles/recent?limit=10
 
// Get system statistics
GET /api/stats
 
// Trigger manual ingestion
POST /api/ingest-now

Error Handling

try {
    const response = await fetch(`${BACKEND_URL}/api/feeds`);
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    const data = await response.json();
    // Process data...
} catch (error) {
    console.error('API Error:', error);
    showError('Failed to load data. Check backend connection.');
}

πŸ› οΈ Development

Local Testing

# Serve locally using any static server
python -m http.server 8000
# or
npx serve .
# or
live-server
 
# Open http://localhost:8000

Browser Console

Use browser dev tools to:

  • Monitor API calls: Network tab
  • Debug JavaScript: Console tab
  • Check errors: Console tab shows connection issues
  • Test functions: Call dashboard functions manually
// Test functions in browser console
refreshDashboard();
fetchLiveFeed();
triggerIngestion();

🎯 Usage Workflow

Daily Operation

  1. Open dashboard in browser
  2. Check stats for feed health
  3. Review live stream for high-scoring articles
  4. Trigger ingestion if needed
  5. Export data for analysis

Feed Management

  1. Use backend dashboard for adding feeds
  2. Upload OPML files via backend
  3. Monitor feed categories on frontend
  4. Adjust scoring via backend configuration

Monitoring

  1. Auto-refresh enabled: Latest articles appear automatically
  2. Color-coded scores: Red = urgent, Orange = significant, Green = watchlist
  3. Click articles: Opens source in new tab
  4. Export functionality: Save configurations and data

🚨 Troubleshooting

Common Issues

β€œLoading feeds…” never resolves:

  • Check backend URL is correct in index.html
  • Verify backend is deployed and running
  • Check browser console for CORS errors

No articles in live stream:

  • Ensure feeds are added to backend
  • Trigger manual ingestion
  • Check if articles score β‰₯ 5.0 (only high-scoring articles are saved)

Stats showing zeros:

  • Backend database may not be initialized
  • Run database schema setup on backend
  • Add some RSS feeds via backend dashboard

Browser Console Debugging

// Check if backend is reachable
fetch('https://your-backend.workers.dev/api/stats')
  .then(r => r.json())
  .then(console.log)
  .catch(console.error);
 
// Test article loading
fetch('https://your-backend.workers.dev/api/articles/recent')
  .then(r => r.json())
  .then(console.log);

βœ… Success Checklist

  • Backend URL configured correctly
  • Dashboard loads without errors
  • Feed categories show actual feeds (not β€œLoadingβ€¦β€œ)
  • Stats display real numbers
  • Live stream shows recent articles
  • Auto-refresh works (articles update automatically)
  • Backend dashboard button opens backend
  • Export function downloads JSON file
  • Mobile layout works properly

Once these work, you have a fully functional prophetic intelligence dashboard! πŸŽ‰

Ring 2 β€” Canonical Grounding

Ring 3 β€” Framework Connections


This frontend is designed to be simple, fast, and reliable. No complex frameworks - just clean HTML/CSS/JavaScript that works everywhere. πŸ’ͺ

Canonical Hub: CANONICAL_INDEX